<template>
  <div>
    <div class="form-window">
      <div class="form-window-line"></div>
      <div class="form-window-txt">运输信息</div>
    </div>
    <div class="form-form">
      <el-form label-position="left" label-width="140px" size="small">
        <el-form-item label="车牌号">
          <div>
            <el-input
              :disabled="edit"
              v-model="transport.voyage_no"
              placeholder="请输入"
              class="form-input"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="型号">
          <div>
            <el-input
              :disabled="edit"
              v-model="transport.vehicle_name"
              placeholder="请输入"
              class="form-input"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="起运时间">
          <div>
            <el-date-picker
              format="yyyy-MM-dd HH:mm:ss"
              :disabled="edit"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="transport.shipment_date"
              type="datetime"
              placeholder="选择日期"
              style="width: 380px"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="起运地所属省市区">
          <div>
            <el-cascader
              :disabled="edit"
              :options="optionsHyAddress"
              class="form-input"
              :props="propsHyAddress"
              :placeholder="departure ? departure : '请选择'"
              @change="changeAddress($event, 1)"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="起运地详细地址">
          <div>
            <el-input
              :disabled="edit"
              v-model="transport.departure_station"
              placeholder="请输入"
              class="form-input"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="目的地所属省市区">
          <div>
            <el-cascader
              :disabled="edit"
              :options="optionsHyAddress"
              class="form-input"
              :props="propsHyAddress"
              :placeholder="terminal ? terminal : '请选择'"
              @change="changeAddress($event, 2)"
            ></el-cascader>
          </div>
        </el-form-item>

        <el-form-item label="目的地详细地址">
          <div>
            <el-input
              :disabled="edit"
              v-model="transport.terminal_station"
              placeholder="请输入"
              class="form-input"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="吨位数">
          <div>
            <el-input
              :disabled="edit"
              v-model="transport.toncount"
              placeholder="请输入"
              class="form-input"
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div class="form-btn-box">
        <el-button size="small" @click="updateInfoItem(9)">修改</el-button>
        <el-button size="small" class="com-btn" @click="saveStorage(9)">保存 </el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    edit: { type: Boolean, default: false },
    optionsHyAddress: {},
    propsHyAddress: {},
    transport: {},
  },
  data() {
    return {};
  },
  computed: {
    //起运地省市区
    departure: function () {
      if (this.transport.departure_province) {
        return (
          this.transport.departure_province +
          "/" +
          this.transport.departure_city +
          "/" +
          this.transport.departure_area
        );
      }
      return "";
    },
    //目的地省市区
    terminal: function () {
      if (this.transport.terminal_province) {
        return (
          this.transport.terminal_province +
          "/" +
          this.transport.terminal_city +
          "/" +
          this.transport.terminal_area
        );
      }
      return "";
    },
  },
  watch: {},
  methods: {
    changeAddress(e, index) {
      //1是起运地 2是目的地
      if (index == 1) {
        this.transport.departure_province = e[0];
        this.transport.departure_city = e[1];
        this.transport.departure_area = e[2];
      } else {
        this.transport.terminal_province = e[0];
        this.transport.terminal_city = e[1];
        this.transport.terminal_area = e[2];
      }

      // this.$emit('update:insure.province', e[0])
      console.log(e);
    },

    //保存
    saveStorage(index) {
      this.$emit("saveStorage", index);
    },
    //修改
    updateInfoItem(index) {
      this.$emit("updateInfoItem", index);
    },
  },
};
</script>
<style scoped>
@import "../../../assets/css/index/form.css";
</style>
